<template>
    <div class="weizhi">
        <el-input placeholder="请输入书名" v-model="addvalueName" clearable class="inputBut"></el-input>
        <el-input placeholder="请输入数量" v-model="addvalueNum" clearable class="inputBut2"></el-input>
        <el-button type="primary" @click="InsertBook" class="but">新增图书</el-button>
        <el-input placeholder="请输入书名" v-model="selbook" clearable class="inputBut"></el-input>
        <el-button type="primary" @click="selectBook" class="but">查询图书</el-button>
    </div>
</template>

<script> 
import axios from 'axios'
import emitter from '../utils/event-bus'
    export default {
        //data
        data() {
            return {
                 addvalueName : '',
                 addvalueNum : '',
                 selbook : '',

            }
        },
        //methods
        methods : {
            InsertBook(){
                if(!this.addvalueName.trim() || !this.addvalueNum.trim() ) return 
                // 新增书名和个数
                const addBook = { name : this.addvalueName, num : +this.addvalueNum }
                // 发送请求
                axios.post('/addBook', addBook).then(
                    response => {
                        console.log('请求addBook' + response.data)
                        this.$notify({
                            title: '成功',
                            message: '操作成功',
                            type: 'success'
                        });
                    },
                    error => {
                        console.log('错误addBook' + error.message)
                        this.$notify.error({
                            title: '失败',
                            message: '操作失败',
                            type: 'success'
                        });
                    }
                )
                //清空
                this.addvalueName = '',
                this.addvalueNum  = ''
            },
    
            selectBook(){
                if(!this.selbook.trim()) return 
                // 创建书名
                axios.get('/select/name?name=' + this.selbook).then(
                    response => {
                        console.log('响应的内容', response.data);
                        const selBook = response.data
                        emitter.emit('selectBook', selBook)
                    },
                    error => {
                        console.log('错误信息是', error.message)
                    }
                )
                //清空
                this.selbook = ''
            }
        }
    }
</script>

<style scoped>
    .weizhi{
        text-align: center;
        
    }
    .but{
        width: 100px;
        height: 50px;
        font-size: 20px;
    }
    .inputBut{
        width: 250px;
        height: 45px;
    }
    .inputBut2{
        width: 120px;
        height:45px;
    }
</style>
